import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  NzCheckboxModule,
  NzCheckBoxOptionInterface,
} from 'ng-zorro-antd/checkbox';

@Component({
  selector: 'app-checkbox-group-string',
  standalone: true,
  imports: [NzCheckboxModule, FormsModule],
  template: `<div class="demo">
    <nz-checkbox-group [(ngModel)]="options" />
    <div class="mt-3 p-2 border border-primary">
      选择结果: {{ selectedValues.join(',') }}
    </div>
  </div> `,
  styles: ``,
})
export class CheckboxGroupStringComponent {
  options: NzCheckBoxOptionInterface[] = [
    { label: '选项一', value: '1', checked: true },
    { label: '选项二', value: '2' },
    { label: '选项三', value: '3' },
    { label: '选项四', value: '4', disabled: true },
  ];

  get selectedValues() {
    return this.options
      .filter((option) => option.checked)
      .map((option) => option.value);
  }
}
